<template>
	<div id="app">
		<!-- <transition name="bounce"> -->
		<router-view></router-view>
		<!-- </transition> -->
		<vue-picture-viewer
			v-if="showPreviewImg"
			:img-data="previewImgs"
			:select-index="previewIndex"
			@close-viewer="showPreviewImg=false"/>
	</div>
</template>

<script>
	/** 常用图片预览创建组件 */
	import VuePictureViewer from '@/components/vuePictureViewer/index'
	export default {
		name: 'app',
		components: {
			VuePictureViewer
		},
		data() {
			return {
				showPreviewImg: false,
				previewIndex: 0,
				previewImgs: []
			}
		},
		mounted() {
			this.addBus()
		},
		methods: {
			addBus() {
				var self = this
				this.$bus.on('preview-image-bus', function(data) {
					self.previewIndex = data.index
					self.previewImgs = data.data
					self.showPreviewImg = true
				})
			}
		}
	}
</script>

<style>
	@import "assets/css/font-awesome.min.css";
	.table{
		border-collapse:collapse;
	}
	.bounce-enter-active {
		animation: bounce-in .5s;
	}

	.bounce-leave-active {
		animation: bounce-out .2s;
	}

	@keyframes bounce-in {
		0% {
			transform: scale(0);
		}

		50% {
			transform: scale(1.05);
		}

		100% {
			transform: scale(1);
		}
	}

	@keyframes bounce-out {
		0% {
			transform: scale(1);
		}

		50% {
			transform: scale(0.95);
		}

		100% {
			transform: scale(0);
		}
	}

	body {
		margin: 0px;
		padding: 0px;
		/* background: #1F2D3D; */
		font-family: Microsoft YaHei, SimSun, sans-serif;
		font-weight: 400;
		-webkit-font-smoothing: antialiased;
		/* font-size: 13px !important; */
	}
	
	.table{
		font-size: 13px !important;
	}
	
	.table td {
	    padding: 10px 10px !important;
	}
	
	.el-table .el-table__cell {
	    padding: 10px 0 !important;
	}
	
	.el-submenu__title i {
	    color: #fff !important;
	}
	

	#app {
		position: absolute;
		top: 0px;
		bottom: 0px;
		width: 100%;
	}

	.el-submenu [class^=fa] {
		vertical-align: baseline;
		margin-right: 10px;
	}

	.el-menu-item [class^=fa] {
		vertical-align: baseline;
		margin-right: 10px;
	}

	.el-dialog {
		position: absolute;
		top: 50%;
		left: 50%;
		margin: 0 !important;
		transform: translate(-50%, -50%);
		max-height: calc(100% - 30px);
		max-width: calc(100% - 30px);
		display: flex;
		flex-direction: column;
	}

	.el-table__fixed,
	.el-table__fixed-right {
		height: auto !important;
		bottom: 7px;
	}
	.el-table .cell {
	    white-space: pre-wrap;
	    word-break: break-all;
	}
	
	.el-button--primary {
	    background-color: #b5060d !important;
	    border-color: #b5060d !important;
		color:#fff !important;
	}
</style>
